import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class ExpansionTilePage extends StatefulWidget {
  @override
  ExpansionTilePageState createState() => new ExpansionTilePageState();
}

class ExpansionTilePageState extends State<ExpansionTilePage> {
  static const CITY_NAMES = {
    '北京': ['东城区', '西城区', '海淀区', '朝阳区', '石景山区', '顺义区'],
    '上海': ['黄浦区', '徐汇区', '长宁区', '静安区', '普陀区', '闸北区'],
    '广州': ['越秀', '海珠', '荔湾', '天河', '白云', '黄埔', '南沙'],
    '深圳': ['南山', '福田', '罗湖', '盐田', '龙岗', '宝安', '龙华'],
    '杭州': ['上城区', '下城区', '江干区', '拱墅区', '西湖区', '滨江区'],
    '苏州': ['姑苏区', '吴中区', '相城区', '高新区', '虎丘区', '工业园区', '吴江区'],
    '苏州1': ['姑苏区', '吴中区', '相城区', '高新区', '虎丘区', '工业园区', '吴江区'],
    '苏州2': ['姑苏区', '吴中区', '相城区', '高新区', '虎丘区', '工业园区', '吴江区'],
    '苏州3': ['姑苏区', '吴中区', '相城区', '高新区', '虎丘区', '工业园区', '吴江区'],
    '苏州4': ['姑苏区', '吴中区', '相城区', '高新区', '虎丘区', '工业园区', '吴江区'],
    '苏州5': ['姑苏区', '吴中区', '相城区', '高新区', '虎丘区', '工业园区', '吴江区'],
    '苏州6': ['姑苏区', '吴中区', '相城区', '高新区', '虎丘区', '工业园区', '吴江区'],
    '苏州7': ['姑苏区', '吴中区', '相城区', '高新区', '虎丘区', '工业园区', '吴江区'],
  };
  Map<String, List<String>> map = {};
  List<String> keyList = [];

  @override
  void initState() {
    super.initState();

    ///转为map
    CITY_NAMES.keys.forEach((key) {
      keyList.add(key);
      List<String> list = [];
      list.addAll(CITY_NAMES[key]);
      map[key] = list;
      print(map[key]);
    });
    print(map);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('ExpansionTile')),
      body: ListView.builder(
        itemCount: CITY_NAMES.length,
        itemBuilder: (BuildContext context, int index) {
          return expansionTile(keyList[index], map[keyList[index]]);
        },
      ),
    );
  }

  Widget expansionTile(String key, List<String> valueList) {
    print(valueList);
    return ExpansionTile(
      title: Text(key,style: TextStyle(color: Colors.grey),),
      ///拿valueList下标的话，转为map，拿到所有key，再遍历key集合，每个key就是每个下标
      ///valueList.asMap().keys.map((element) => subTitle(element)).toList()
      children: valueList.map((element) => subTitle(element)).toList(),
    );
  }
}

Widget subTitle(String subTitle) {
  return GestureDetector(
    onTap: () {
      print(subTitle);
    },
    child: Container(
      width: double.infinity,
      alignment: Alignment.centerLeft,
      padding: EdgeInsets.symmetric(vertical: 10, horizontal: 15),
      child: Text(subTitle),
    ),
  );
}
